<template>
  <body>
    <div id="majorIntroduction">
      <div class="homeHeader">
        <div class="logo">
          <img id="logo" src="../../assets/Logo.jpeg" alt="" />
          <h3>高考志愿填报智能辅助系统</h3>
        </div>
        <div class="nav">
          <div class="navMenu">
            <el-menu
              style="border: none"
              default-active="/major"
              router
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#fff"
              text-color="rgba(0, 21, 41,.8)"
              active-text-color="rgba(255,101,0)"
            >
              <el-menu-item index="/homePage">
                <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="/college">
                <span slot="title">院校查询</span>
              </el-menu-item>
              <el-menu-item index="/major">
                <span slot="title">专业查询</span>
              </el-menu-item>
              <el-menu-item index="/fillAspiration">
                <span slot="title">模拟填志愿</span>
              </el-menu-item>
              <el-menu-item index="/news">
                <span slot="title">高考资讯</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <div class="userMessage">
          <ul v-if="!showname">
            <router-link href="#" to="/register">注册</router-link>
            <router-link href="#" to="/login">登录</router-link>
          </ul>
          <div v-if="showname">
            <router-link class="show" to="/home">{{ firsrName }}</router-link>
            <el-button type="danger" plain @click="logout()"
              >退出登录</el-button
            >
            <router-link to="/manager" v-if="showManager === true"
              >后台入口</router-link
            >
          </div>
        </div>
      </div>
      <el-card class="content">
        <!-- 面包屑 -->
        <div class="menuTitle">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据查询</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/major' }"
              >专业查询</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ majorTitle.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>专业概况</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- title 一些信息 -->
        <el-card class="collegeTitle">
          <div class="collegeHeader">
            <div class="collegeIntro">
              <div class="collegeName">
                <span style="font-size: 32px">{{ majorTitle.name }}</span>
                <i class="icon close-icon" v-if="majorTitle.heat >= 316220"></i>
                <span
                  class="heat"
                  :style="{
                    marginLeft: majorTitle.heat >= 316220 ? '-10px' : '10px',
                  }"
                >
                  人气值:
                  <span>{{ majorTitle.heat }}</span>
                </span>
              </div>
              <div>
                <span style="display: inline-block; padding-right: 5px"
                  ><span>{{ majorTitle.type }}</span></span
                >
                /
                <span class="infoStyle"
                  >专业代码：<span>{{ majorTitle.code }}</span></span
                >
                /
                <span class="infoStyle"
                  >修业年限：<span>{{ majorTitle.majorYear }}</span></span
                >
                /
                <span class="infoStyle"
                  >授予学位：<span>{{ majorTitle.degree }}</span></span
                >
              </div>
              <div
                class="contactInformation"
                style="font-size: 14px; margin-top: 10px"
              ></div>
            </div>
          </div>
        </el-card>
        <div class="main">
          <!-- 主题内容 -->
          <div class="collegeNav">
            <router-link
              class="routerStyle"
              :to="`/major/${this.$route.params.id}/introduction`"
              :class="active == 0 ? 'activeClass' : ''"
            >
              <span @click="newsNavClick(0)">专业概况</span>
            </router-link>
            <router-link
              class="routerStyle"
              :to="`/major/${this.$route.params.id}/employment`"
              :class="active == 1 ? 'activeClass' : ''"
            >
              <span @click="newsNavClick(1)">相关就业</span>
            </router-link>
            <router-link
              class="routerStyle"
              :to="`/major/${this.$route.params.id}/openInstitutions`"
              :class="active == 2 ? 'activeClass' : ''"
            >
              <span @click="newsNavClick(2)">开设院校</span>
            </router-link>
          </div>
          <div class="collegeContent">
            <router-view></router-view>
          </div>
        </div>
      </el-card>
      <div class="homeFooter">
        <div class="footer">
          <div class="instructions">
            <h2>系统使用说明</h2>
            <h4>
              1、本查询系统的信息仅供参考，具体数据请以学校官网或考试院发布为准。
            </h4>
            <h4>2、本站数据未经授权严禁转载，违者将依法追究责任。</h4>
            <h4>
              3、如对本系统或相关服务有任何疑问，可发送邮件至：1959198478@qq.com，或拨打电话198-7136-0508。
            </h4>
          </div>
          <div class="erweima">
            <img :src="img" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "majorIntroduction",
  props: ["collegename"],
  data() {
    return {
      // 用于决定切换
      active: 0,
      // 首页用户名
      firsrName: "",
      // 显示用户名
      showManager: false,
      showname: false,
      img: require("@/assets/二维码.png"),
      majorTitle: {
        majorId: "31",
        name: "哲学",
        type: "本科",
        code: "010101",
        majorYear: "四年",
        degree: "哲学学士",
        heat: "316220",
      },
    };
  },
  methods: {
    // 登出
    logout: throttling(function () {
      // 清空token
      var _this = this;
      this.$axios.get("logout").then((res) => {
        if (res.data.code === 200) {
          _this.$router.replace("/login");
        }
      });
      this.$router.push("/login");
    }, 1000),
    // 切换
    newsNavClick: throttling(function (i) {
      this.active = i;
      sessionStorage.setItem("active", this.active);
    }, 1000),
  },
  mounted() {
    this.active = sessionStorage.getItem("active");
  },
  created() {
    sessionStorage.setItem("active", this.active);
    const token = window.sessionStorage.getItem("tokenvalue");
    const identify = window.sessionStorage.getItem("identify");
    const managername = JSON.parse(
      window.sessionStorage.getItem("managername" || "[]")
    );
    const username = JSON.parse(
      window.sessionStorage.getItem("username" || "[]")
    );
    if (token !== null) {
      console.log(token);
      this.showname = true;
      if (identify === "201") {
        this.firsrName = managername;
        this.showManager = true;
      } else if (identify === "200") {
        this.firsrName = username;
        this.showManager = false;
      } else {
        this.showManager = false;
      }
    }
    console.log(this.$route);
    // 获取专业信息
    this.$axios
      .post(
        "/major",
        qs.stringify({
          majorId: this.$route.params.id,
        })
      )
      .then((res) => {
        console.log(res);
        this.majorTitle = res.data;
      });
  },
  beforeDestroy() {
    sessionStorage.setItem("active", 0);
  },
};
</script>


<style scoped>
body {
  width: 100%;
  font-size: 16px;
}

li {
  list-style: none;
}

a {
  color: #666;
}

.homeHeader {
  z-index: 999;
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 9.8vh;
  color: rgba(0, 21, 41);
}

.homeHeader a {
  color: rgba(0, 21, 41);
}
.hashFixed {
  position: fixed;
  top: 0;
  z-index: 999;
}

.homeHeader-active {
  position: fixed;
  top: 0;
}

.logo {
  height: 9.8vh;
  margin-left: 1.5vw;
  font-size: 16px;
}
#logo {
  float: left;
  width: 2.6vw;
  height: 5.7vh;
  margin-top: 0.9vw;
}

.logo h3 {
  margin-left: 1.1vw;
  float: left;
  height: 9.8vh;
  line-height: 9.8vh;
  text-align: center;
  color: rgba(0, 21, 41);
  font-size: 18px;
}

.nav {
  margin-left: 1.5vw;
  height: 9.8vh;
  font-size: 24px;
}

.navMenu {
  height: 9.8vh;
}

.navMenu /deep/ .el-menu {
  height: 9.8vh;
}

.navMenu .el-menu .el-menu--horizontal .el-menu-item {
  height: 9.8vh;
}

.navMenu .el-menu /deep/.el-menu-item {
  width: 7.4vw;
  text-align: center;
  height: 9.8vh;
}

.el-menu-item span {
  font-weight: bold;
  font-family: "微软雅黑";
  font-size: 18px;
}

.el-menu-item span:hover {
  color: rgba(255, 101, 0);
}

.userMessage {
  height: 9.8vh;
  line-height: 9.8vh;
  text-align: center;
  font-size: 16px;
}

.userMessage a:first-child {
  margin-right: 0.7vw;
}
.userMessage a {
  margin-left: 0.7vw;
  color: rgba(0, 21, 41);
}

.userMessage a:hover {
  color: rgba(255, 101, 0);
}

.userMessage /deep/ .el-button {
  width: 7.4vw;
  font-size: 14px;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  width: 96.6%;
  background-color: #fff;
  margin: 1.7vh auto 4.9vh;
  flex: 1;
}

.text {
  font-size: 14px;
}

.item {
  padding: 2.9vh 0;
}

.menuTitle {
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: left;
  margin-left: 2.2vw;
}

.el-breadcrumb {
  height: 2.9vh;
  line-height: 2.9vh;
}

.menuTitle .el-breadcrumb__item {
  font-size: 14px;
}

.collegeTitle {
  background: url("../../assets/collegeBack.jpg");
  color: white;
}

.collegeHeader {
  width: 100%;
  height: 30vh;
}

.collegeIntro {
  float: left;
  margin-left: 3vw;
  margin-top: 4.9vh;
  width: 50%;
}

.icon {
  width: 2.6vw;
  height: 4.1vh;
  line-height: 4.1vh;
  margin-bottom: -0.8vh;
}
.close-icon {
  content: url("../../assets/heat.png");
}

.heat {
  display: inline-block;
  color: rgba(253, 105, 38);
  font-size: 18px;
  margin-left: 0.7vw;
  font-weight: bold;
  margin-bottom: 3.3vh;
}

.infoStyle {
  display: inline-block;
  padding-right: 0.4vw;
  padding-left: 0.4vw;
  height: 4.9vh;
  line-height: 4.9vh;
  font-weight: 18px;
}

.collegeNav {
  margin-top: 1.6vh;
  color: #666;
  width: 33.4vw;
  height: 8.1vh;
}

.collegeNav .routerStyle {
  border-radius: 5px;
  display: inline-block;
  width: 10.4vw;
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: center;
  border-top: 2px solid rgba(238, 238, 238);
  border-right: 2px solid rgba(238, 238, 238);
  border-left: 2px solid rgba(238, 238, 238);
}

.collegeNav .routerStyle:hover {
  background-color: rgba(255, 101, 0);
  color: white;
}

.activeClass {
  color: white;
  background-color: rgba(255, 101, 0);
}

.collegeContent {
  width: 100%;
  min-height: 107.3vh;
  border: 1px solid rgba(255, 101, 0);
  border-radius: 5px;
}

.homeFooter {
  width: 100%;
  min-height: 40.7vh;
  background-color: rgba(240, 242, 245);
}

.footer {
  width: 85%;
  display: flex;
  margin: 3.3vh auto;
}

.instructions {
  color: rgba(0, 21, 41);
  width: 85%;
  height: 16.3vh;
  text-align: left;
  margin: 4.9vh auto;
}

.instructions h2 {
  font-weight: normal;
  display: block;
  height: 4.9vh;
  width: 11.1vw;
  margin-bottom: 1.5vw;
  font-size: 20px;
}

.instructions h4 {
  display: block;
  font-weight: normal;
  height: 4.9vh;
  margin-bottom: 1.6vh;
}

.instructions h4:last-child {
  margin-bottom: 0;
}

.erweima {
  width: 10.4vw;
  margin: 4.9vh auto;
}

.erweima img {
  width: 100%;
}
</style>
